<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path"  value="${pageContext.request.contextPath}"/>



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/common.css" />
		<link rel="stylesheet" href="css/cart.css" />
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<ul>
					<li>
						<a href="${path }/toindex">首页</a>
					</li>
					<li>
						<a href="${path }/productlist">手机数码</a>
					</li>
					<li>
						<a href="##">电脑办公</a>
					</li>
					<li>
						<a href="##">衣服用品</a>
					</li>
					<li>
						<a href="##">
							<img src="img/title.png" />
						</a>
					</li>
					<li>
						<a href="${path }/tologin">
							<i class="icon-login"></i>
							<span >登陆</span>
						</a>
					</li>
					<li>
						<a href="${path }/tocart">
						<i class="iconcart"></i>
						<span >购物车</span>
						</a>
					</li>
					<li>
						<a href="##">
							<i class="iconcall"></i>
						<span >在线客服</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="content">
			<div class="section">
				<ul>
					<li>
						<i style="background-color: #1428a0;">1</i>
						<a style="color: #1428a0;">查看购物车</a>
					</li>
					<li>
						<i>2</i>
						<a>确认订单信息</a>
					</li>
					<li>
						<i>3</i>
						<a>提交并付款</a>
					</li>
				</ul>
			</div>
			<div class="shopcart">
				<div class="shopcarttitle">
					<span>购物车</span>
				</div>
				<div class="shopcartlisttitle">
					<i></i>
					<ul>
						<li>
							<a style="margin-left: -115px;">商品</a>
						</li>
						<li>
							<a>单价</a>
						</li>
						<li>
							<a>获得积分</a>
						</li>
						<li>
							<a>数量</a>
						</li>
						<li>
							<a>金额</a>
						</li>
					</ul>
					</div>
					<div class="top-brands">
		<div class="container">
			<h3 align="center">购物车列表</h3>
			<c:if test="${empty(cart.map) }"> 
        您还没购任何商品
   </c:if>
			<c:if test="${!empty(cart.map) }">
				<table border="3" align="center">
					<tr>
						<td>商品名称</td>
						<td>商品描述</td>
						<td>单价</td>
						<td>数量</td>
						<td>小计</td>
						<td>操作</td>
					</tr>
					<c:forEach items="${cart.map}" var="entry">
						<tr>
							<td>${entry.value.product.name}</td>
							<td>${entry.value.product.description}</td>
							<td>${entry.value.product.discountprice}</td>
							<td><input type="text" name="count"
								value="${entry.value.count}" style="width: 50" /></td>
							<td>${entry.value.price}</td>
							<td><a href="deleteItem?id=${entry.value.product.id}">删除</a></td>
						</tr>
					</c:forEach>

					<tr>
						<td colspan="3">总价</td>
						<td colspan="2">${cart.price}</td>
						<td colspan="1"><a href="clearCart">清空购物车</a></td>

					</tr>








				</table>
			</c:if>
		</div>
	</div>
					
					<!-- <div class="shopcartlist">
						<div class="cartlist">
							<i class="iconchecked"></i>
							<div class="cartinfo">
    							<div class="shopcartgoods">
        							<div class="shopcartleftimg">
            							<a href="##">
                							<img src="img/phone.jpg" alt="" style="width: 100px;height: 100px;">
            							</a>
        							</div>
        							<a href="##" class="info">Galaxy A6s
            							<p>花木蓝&nbsp;6GB RAM
                						<br>64GB ROM&nbsp;公开版&nbsp;</p>
        							</a>
    							</div>
    							<div class="unitdiscount">
        							<p style="color:#363d4c;font-weight: normal;">¥1,799.00</p>
    							</div>
    							<div class="shopcartjifen">1799</div>
    							<div class="shopcartqty">
        							<div class="calculatenum">
            							<a class="qtybtnleft">
                							<a class="minus"></a>
            							</a>
            							<input id="bt" class="qtyinput" type="text"  value="1">
            							<a class="qtybtnright" >
                							<a class="leftplus" id="antzone"></a>
            							</a>
        							</div>
        							<a class="shopcartremove">删除</a>
    							</div>
    							<div class="shopcart-sum shopcart-sum-discount">
        							<p style="color:#363d4c;font-weight: normal;">¥1,799.00</p>
    							</div>
							</div>
						</div>
					</div>
					<div class="sumbox">
						<label class="floatleft">
							<i class="shopcar"></i>
							全场免运费，下单后1~2天内发货（预售等特殊情况除外）
						</label>
						<div class="shopcostsum">
						<div>
							<span class="sumtitle">总计</span>
							<span class="sumnum" id="money">¥0.00</span>
					      </div>
					      <div>
					       <span class="sumtitle">获得积分</span>
					       <span class="sumnum" id="jifen">0</span>
						</div>
						</div>
					</div> -->
					<div class="shopcartpay">
						<a href="${path }/toorderinfo"class="btn">去结算</a>
						<a href="${path }/productlist" class="continue">
							<i class="arrow"></i>
							继续购物
						</a>
					</div>
				</div>
			</div>
			
	    
		<div class="totop" id="goto">
		<i class="icontop"></i>
	</div>
			
			<div class="footer">
			<div class="footertop">
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">我的三星</a>
					</li>
					<li>
						<a href="##">我的订单</a>
					</li>
					<li>
						<a href="##">我的评分</a>
					</li>
					<li>
						<a href="##">优惠券</a>
					</li>
					<li>
						<a href="##">个人资料</a>
					</li>
					<li>
						<a href="##">收货地点</a>
					</li>
					<li>
						<a href="##">售后网点查询</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">网上购物商城</a>
					</li>
					<li>
						<a href="##">购物指南</a>
					</li>
					<li>
						<a href="##">支付方式</a>
					</li>
					<li>
						<a href="##">订单及发票</a>
					</li>
					<li>
						<a href="##">关于配送</a>
					</li>
					<li>
						<a href="##">售后服务</a>
					</li>
					<li>
						<a href="##">会员及优惠</a>
					</li>
				</ul>
				<ul>
					<li>
						<a href="##" style="font-weight: bold;">服务支持</a>
					</li>
					<li>
						<a href="##">常见问题</a>
					</li>
					<li>
						<a href="##">关于商城</a>
					</li>
					<li>
						<a href="##">关于三星</a>
					</li>
					<li>
						<a href="##">联系我们</a>
					</li>
					<li>
						<a href="##">使用条款</a>
					</li>
					<li>
						<a href="##">加为书签</a>
					</li>
				</ul> 
				<div class="way">
				<div class="sharing">官方分享</div>
			    <div class="sharingbtn">
				    <a href="##" class="weibo"></a>
				    <a href="##" class="wechat"></a>
			</div>
			</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(".cartlist i").click(function(){
			$("#money").html("¥1799");
			$("#jifen").html(1799);
			$(this).css({
				"background-position": "-44px -408px"
			})
		})
		var goto = document.getElementById("goto");
    	goto.onclick = function(){
    		var intervalId = setInterval(function(){
    			if(document.documentElement.scrollTop<=0){
    				clearInterval(intervalId);
    			}else{
    			document.documentElement.scrollTop = document.documentElement.scrollTop - 30;
    		    }
    		},1)
    	}
  var odiv = document.getElementById("antzone");
  var obt = document.getElementById("bt");
  var count = 0;
  odiv.onclick = function () {
    count = count + 1;
    obt.innerHTML = count;
  }

	</script>
</html>
